@page "/padder"

<Rows>
    <Markup Content="Padder adds outer spacing around its child content without modifying the child component itself." Foreground="@Color.Grey70" />
    <Markup Content="Source Code: Padder.razor" Foreground="@Color.DeepSkyBlue1" Decoration="@Decoration.Underline" link="@DocumentationUrl" />
    <Newline />
    <Panel Title="Code" Border="BoxBorder.Rounded" Expand="true">
        <SyntaxHighlighter Language="razor"
                           Code="@_panelPaddedCode"
                           ShowLineNumbers="true" />
    </Panel>
    <Panel Title="Preview" Border="BoxBorder.Rounded" Expand="true">
        <Panel Title="Padder adds space"
               Border="@BoxBorder.Square"
               Expand="false">
            <Padder Padding="new Padding(1, 1, 1, 1)">
                <Markup Content="Comfortable breathing room." />
            </Padder>
        </Panel>
    </Panel>
</Rows>

@code {
    private static readonly string _panelPaddedCode = @"<Panel Title=""Padder adds space""
       Border=""BoxBorder.Square"" Expand=""false"">
    <Padder Padding=""new(1, 1, 1, 1)"">
        <Markup Content=""Comfortable breathing room."" />
    </Padder>
</Panel>".Trim();

    private const string DocumentationUrl = "https://github.com/LittleLittleCloud/RazorConsole/blob/main/src/RazorConsole.Core/Components/Padder.razor";
}
